
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>长沙旅游攻略地图</title>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/leaflet/1.7.1/leaflet.min.js"></script>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/leaflet.markercluster/1.5.0/leaflet.markercluster.js"></script>
    <link rel="stylesheet" href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/leaflet/1.7.1/leaflet.min.css"/>
    <link rel="stylesheet" href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/leaflet.markercluster/1.5.0/MarkerCluster.css"/>
    <link rel="stylesheet" href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/leaflet.markercluster/1.5.0/MarkerCluster.Default.css"/>
    <link rel="stylesheet" href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/5.15.4/css/all.min.css"/>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        #map {
            width: 100%;
            height: 100vh;
        }
        .legend {
            position: fixed;
            bottom: 50px;
            left: 50px;
            width: 180px;
            height: 200px;
            border: 2px solid grey;
            z-index: 9999;
            font-size: 14px;
            background-color: white;
            padding: 10px;
            border-radius: 5px;
        }
        .title {
            position: fixed;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 9999;
            font-size: 18px;
            font-weight: bold;
            background-color: white;
            padding: 10px;
            border-radius: 5px;
            border: 2px solid grey;
        }
        .custom-icon {
            background: none;
            border: none;
        }
        .custom-icon i {
            font-size: 24px;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <div class="legend">
        <p><b>图例</b></p>
        <p><span style="color:red">●</span> 第1天</p>
        <p><span style="color:blue">●</span> 第2天</p>
        <p><span style="color:green">●</span> 第3天</p>
        <p><span style="color:purple">●</span> 第4天</p>
        <p><i class="fa fa-camera"></i> 景点</p>
        <p><i class="fa fa-utensils"></i> 美食</p>
        <p><i class="fa fa-shopping-cart"></i> 购物</p>
        <p><i class="fa fa-home"></i> 住宿</p>
        <p><i class="fa fa-subway"></i> 交通</p>
    </div>
    <div class="title">
        长沙旅游攻略 - 第2天行程
    </div>
    
    <script>
        // 初始化地图
        var map = L.map('map').setView([28.2282, 112.9388], 13);
        
        // 添加高德地图底图
        L.tileLayer('https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={{x}}&y={{y}}&z={{z}}', {
            attribution: '&copy; 高德地图',
            maxZoom: 18
        }).addTo(map);
        
        // 创建标记聚类
        var markers = L.markerClusterGroup();
        
        // 添加标记
        
        var marker0 = L.marker([28.1962, 112.9783], {
            icon: L.divIcon({html: '<i class="fa fa-home" style="color:green"></i>', className: 'custom-icon'})
        }).bindPopup("
        <b>培元桥附近酒店</b><br>
        酒店早餐
        ").bindTooltip("1. 培元桥附近酒店");
        markers.addLayer(marker0);
        

        var marker1 = L.marker([28.1792, 112.9311], {
            icon: L.divIcon({html: '<i class="fa fa-camera" style="color:red"></i>', className: 'custom-icon'})
        }).bindPopup("
        <b>岳麓山</b><br>
        游览岳麓山，体验融儒、佛、道为一体的文化名山
        ").bindTooltip("2. 岳麓山");
        markers.addLayer(marker1);
        

        var marker2 = L.marker([28.1803, 112.9344], {
            icon: L.divIcon({html: '<i class="fa fa-camera" style="color:red"></i>', className: 'custom-icon'})
        }).bindPopup("
        <b>岳麓书院</b><br>
        参观中国四大书院之一的岳麓书院
        ").bindTooltip("3. 岳麓书院");
        markers.addLayer(marker2);
        

        var marker3 = L.marker([28.1803, 112.9344], {
            icon: L.divIcon({html: '<i class="fa fa-camera" style="color:red"></i>', className: 'custom-icon'})
        }).bindPopup("
        <b>爱晚亭</b><br>
        欣赏爱晚亭风景
        ").bindTooltip("4. 爱晚亭");
        markers.addLayer(marker3);
        

        var marker4 = L.marker([28.1803, 112.9344], {
            icon: L.divIcon({html: '<i class="fa fa-cutlery" style="color:orange"></i>', className: 'custom-icon'})
        }).bindPopup("
        <b>湘味楼</b><br>
        在岳麓山附近餐厅用餐，可点不辣或微辣菜品
        ").bindTooltip("5. 湘味楼");
        markers.addLayer(marker4);
        

        var marker5 = L.marker([28.1927, 112.9664], {
            icon: L.divIcon({html: '<i class="fa fa-camera" style="color:red"></i>', className: 'custom-icon'})
        }).bindPopup("
        <b>橘子洲</b><br>
        参观毛泽东青年艺术雕塑，登问天台远眺长沙全景，欣赏"中国第一洲"的自然风光
        ").bindTooltip("6. 橘子洲");
        markers.addLayer(marker5);
        

        var marker6 = L.marker([28.2062, 112.9783], {
            icon: L.divIcon({html: '<i class="fa fa-cutlery" style="color:orange"></i>', className: 'custom-icon'})
        }).bindPopup("
        <b>文和友老长沙龙虾馆</b><br>
        体验80年代怀旧老长沙的氛围，品尝口味虾（可要求微辣版本）
        ").bindTooltip("7. 文和友老长沙龙虾馆");
        markers.addLayer(marker6);
        

        var marker7 = L.marker([28.2062, 112.9783], {
            icon: L.divIcon({html: '<i class="fa fa-cutlery" style="color:orange"></i>', className: 'custom-icon'})
        }).bindPopup("
        <b>茶颜悦色</b><br>
        品尝网红茶饮，休闲放松
        ").bindTooltip("8. 茶颜悦色");
        markers.addLayer(marker7);
        
        
        // 添加到地图
        map.addLayer(markers);
        
        // 添加路线
        
        var polyline = L.polyline([[28.1962, 112.9783], [28.1792, 112.9311], [28.1803, 112.9344], [28.1803, 112.9344], [28.1803, 112.9344], [28.1927, 112.9664], [28.2062, 112.9783], [28.2062, 112.9783]], {
            color: 'blue',
            weight: 2.5,
            opacity: 0.8
        }).addTo(map);
        
    </script>
</body>
</html>
